import React from "react";
import { Button,  Select, Modal, Cascader, TreeSelect, Col, Row,Divider, Input, Collapse } from 'antd/lib';
import notification from "@/services/notification";
import {get} from "lodash";
import Uploads from "@/services/uploads";
import Upload from "antd/lib/upload";
import 'antd/dist/antd.less'
import WarningOutlined from "@ant-design/icons/WarningOutlined";
import {DeleteOutlined, UploadOutlined} from '@ant-design/icons';
import Customer from "@/services/customer";
import Enums from "@/services/enums";
import moment from "moment";
import DatePicker from "antd/lib/date-picker";
import locale from 'antd/es/date-picker/locale/zh_CN';
import { currentUser } from "@/services/auth";
import ContractApply from "@/services/contractapply";
import GlobalFunctions from '@/store/globalFunctions';
import { inject, observer } from 'mobx-react';
import { filter } from 'lodash';
import "./ContractTable.less";

const { confirm } = Modal;
const { Panel } = Collapse;

class contractTable extends React.Component {
  state = {
    kuangjiaxieyivisible: true,
    volumepurchasevisible: false,
    volumepurchasedata:[{id:0,name:"否"}, {id:1,name:"是"}],

    pay_directiondata:[{id:1,name:"付款"},{id:0,name:"收款"},{id:2,name:"非经济"}],
    pricetypedata:[{id:0,name:"总价合同"},
    {id:1,name:"单价合同"},{id:2,name:"费率合同"},{id:3,name:"成本补偿"},{id:4,name:"绩效激励"}],

    infrastructurevisible: false,
    infrastructuredata:[{id:0,name:"否"}, {id:1,name:"是"}],
    zhengcaidata:[{id:0,name:"否"}, {id:1,name:"是"}],
    iskeyandata:[{id:0,name:"否"}, {id:1,name:"是"}],
    iszhaobiaodata:[{id:0,name:"否"}, {id:1,name:"是"}],
    empowersexdata: [{ id: "是", name: "是" }, { id: "否", name: "否" }],
  };

  componentWillMount() {
      console.log('currentUser',currentUser)
  }
fieldedit(field){
  if(!this.props.contractStore.contractModel.isedit){
    return true;
  }
  if(this.props.contractStore.contractModel.colcontrol){
    if(this.props.contractStore.contractModel.allow_col.indexOf(field)>=0){
      return false;
    }else{
      return true;
    }
  }else{
    return false;
  }
}

  amountChange =e =>{
    let moneychinese=GlobalFunctions.changeNumMoneyToChinese(e.target.value);
    this.props.contractStore.contractModel.setAmount(e.target.value);
    this.props.contractStore.contractModel.setAmount_words(moneychinese);
  }

  departmentchange= (value) => {
    let volumepurchasevisible=false;
    let volumepurchase =0;
    let datasel=filter(this.props.departmentdata,['code', this.props.volumepurchaseunit]);
    if(datasel.length>0){
      if(value===datasel[0].id){
        volumepurchasevisible=true;
        volumepurchase =this.props.contractStore.contractModel.volumepurchase;
      }
    }
    this.props.contractStore.contractModel.setDepartmentid(value);
    this.props.contractStore.contractModel.setVolumepurchase(volumepurchase);
      this.setState({
        volumepurchasevisible: volumepurchasevisible,
      });
   };

  cascaderonChange2 = value => {
    this.props.contractStore.contractModel.setContracttype(value);
    if(this.props.isnew){
      let infrastructurevisible =false;
      let arr1=this.props.beianhetong.split(',').filter(item=>{ return value.includes(item)})
      if(arr1.length>0){
        infrastructurevisible =true;
      }
      let kuangjiaxieyivisible =true;
      let arr2=this.props.kuangjiaxieyi.split(',').filter(item=>{ return value.includes(item)})
      if(arr2.length>0){
        kuangjiaxieyivisible =false;
      }
        this.setState({
          infrastructurevisible: infrastructurevisible,
          kuangjiaxieyivisible: kuangjiaxieyivisible,
        });
    }
  }
  bill_dateonchange = (value) => {
    if (GlobalFunctions.isEmptyobj(value)) {
      return;
    }
    this.props.contractStore.contractModel.setBill_date(value);
    if (!this.props.contractStore.contractModel.isnew) {
      return;
    }
    if(this.props.contractStore.contractModel.isbulu ===0 || this.props.contractStore.contractModel.isbulu ==="0"){
      this.props.contractStore.getcode("contracts",value,0,"code");
    }
   };



  disabledDate=(current)=>{

    if(GlobalFunctions.isEmptyobj(this.props.contractStore.contractModel.start_date)){
      return true;
    }
    return current && current < this.props.contractStore.contractModel.start_date.endOf('day'); // 选择时间要大于等于当前天。若今天不能被选择，去掉等号即可。

  }

  render() {
    console.log('this.state.kuangjiaxieyivisible',this.state.kuangjiaxieyivisible)
    return(
      <div>
      <Collapse defaultActiveKey={['1','2','3']} >
       <Panel header="基本" key="1">
      <Row style={{ marginBottom: 5}}>
        <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>经办部门:</div></Col>
				  <Col span={6}>
              <Select style={{ width: "100%" }}
                    showSearch
                    optionFilterProp="children"
                      value={this.props.contractStore.contractModel.departmentid}
                      onChange={this.departmentchange}  
                      disabled ={this.fieldedit("departmentid")}>
              {(this.props.departmentdata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
          </Col>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>经办人:</div></Col>
				  <Col span={6}>
              <Select style={{ width:  "100%" }}
                      showSearch
                      optionFilterProp="children"
                      value={this.props.contractStore.contractModel.employeeid}
                      onChange={value => this.props.contractStore.contractModel.setEmployeeid(value)} 
                      disabled ={this.fieldedit("employeeid")}>
              {(this.props.employeedata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>起草日期:</div></Col>
				  <Col span={6}>
            <DatePicker
              locale={locale}
              style={{ width:"100%" }}
              value={this.props.contractStore.contractModel.bill_date}
               onChange={this.bill_dateonchange}
              placeholder="日期"
              disabled ={this.fieldedit("bill_date")}
              autoFocus
            />
          </Col>
        </Row>
        <Row style={{ marginBottom: 5}}>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>合同类别:</div></Col>
          <Col span={6}>
                  <TreeSelect
                  showSearch
                  disabled ={this.fieldedit("contracttype")}
                  style={{ width:"100%" }}
                  value={this.props.contractStore.contractModel.contracttype}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  treeData={this.props.contracttypenewdata}
                  onChange={this.cascaderonChange2}
                />
				  </Col>
        {this.state.infrastructurevisible && (<>
        <Col span={2}><div className="contractseditTitleStyle">备案合同:</div></Col>
				<Col span={6}>
              <Select style={{ width:  "100%" }} value={this.props.contractStore.contractModel.infrastructure} 
              onChange={value => this.props.contractStore.contractModel.setInfrastructure(value)} 
              disabled ={this.fieldedit("infrastructure")}>
              {(this.state.infrastructuredata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col></>)}
        {this.state.volumepurchasevisible && (<>
          <Col span={2}><div className="contractseditTitleStyle">带量采购:</div></Col>
				<Col span={6}>
              <Select style={{ width:  "100%" }} value={this.props.contractStore.contractModel.volumepurchase} 
              onChange={value =>this.props.contractStore.contractModel.setVolumepurchase(value)} 
              disabled ={this.fieldedit("volumepurchase")}>
              {(this.state.volumepurchasedata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col></>)}
          <Col span={2}><div className="contractseditTitleStyle">状态:</div></Col>
				  <Col span={6}>
              <Input
                style={{ width:"100%" }}
                value={this.props.contractStore.contractModel.status===0 ? "草稿":(this.props.contractStore.contractModel.status===1 ? "审核中":"已审核")}
                placeholder="状态"
                disabled="disabled"
              />
				  </Col>
          </Row>
        <Row style={{ marginBottom: 5}}>
        <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>
        {this.props.contractStore.contractModel.isbulu ===2 ? "正式编码":this.props.tablefielddata.filter(item => item.code==='code')[0].name}:</div></Col>
				  <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.code}
                onChange={e => this.props.contractStore.contractModel.setCode(e.target.value)}
                disabled ={this.fieldedit("code")}
                autoFocus
              />
          </Col>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>合同名称:</div></Col>
				  <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.name}
                onChange={e => this.props.contractStore.contractModel.setName(e.target.value)}
               disabled ={this.fieldedit("name")}
                placeholder="合同名称"
              />
				  </Col>
         { this.props.contractStore.contractModel.isbulu !==2 &&( <Col span={2}><div className="contractseditTitleStyle">正式编码:</div></Col>)}
         { this.props.contractStore.contractModel.isbulu !==2 &&(<Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.officialcode}
                onChange={e =>this.props.contractStore.contractModel.setOfficialcode(e.target.value)}
                placeholder="null"
                disabled ={!(this.props.contractStore.contractModel.status ===2 && currentUser.hasPermission("admin"))}
                autoFocus
              />
          </Col>)}
        </Row>
        <Row style={{ marginBottom: 5}}>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>合同单位:</div></Col>
				  <Col span={6}>
              <Select style={{ width:  "100%" }}
              value={this.props.contractStore.contractModel.party_aid}
              showSearch
	            optionFilterProp="children"
              onChange={value =>this.props.contractStore.contractModel.setParty_aid(value)}
              disabled ={this.fieldedit("party_aid")}>
              {(this.props.customerdata || []).map(item => (
                <Select.Option value={item.id}>{item.strcustomername}</Select.Option>
              ))}
            </Select>
          </Col>
         <Col span={2}><div className="contractseditTitleStyle">第三方:</div></Col>
				 <Col span={6}>
           <Select style={{ width:  "100%" }}  value={this.props.contractStore.contractModel.party_bid} 
           showSearch
	         optionFilterProp="children"
           onChange={value =>this.props.contractStore.contractModel.setParty_bid(value)}  
           disabled ={this.fieldedit("party_bid")}>
            {this.props.customerdata.map(item => (
             <Select.Option key={item.id} value={item.id}>{item.strcustomername}</Select.Option>
            ))}
           </Select>
			   </Col>
         {this.state.kuangjiaxieyivisible && (<>
        <Col span={2}><div className="contractseditTitleStyle">收付款类型:</div></Col>
        <Col span={6}>
              <Select style={{ width:  "100%" }} value={this.props.contractStore.contractModel.pay_direction} 
              onChange={value =>this.props.contractStore.contractModel.setPay_direction(value)} 
              disabled ={this.fieldedit("pay_direction")}>
              {(this.state.pay_directiondata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col></>)}
        </Row>
        {this.state.kuangjiaxieyivisible && (<Row style={{ marginBottom: 5}}>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>合同类型</div></Col>
				  <Col span={6}>
              <Select style={{ width:  "100%" }} value={this.props.contractStore.contractModel.pricetype} 
              onChange={value => this.props.contractStore.contractModel.setPricetype(value)} 
              disabled ={this.fieldedit("pricetype")}>
              {(this.state.pricetypedata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>
          { this.props.contractStore.contractModel.pricetype===0 ? "金额(¥)":"预算金额(¥)"}:</div></Col>
				  <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.amount}
                onChange={this.amountChange}
                placeholder="金额(¥)"
                onkeyup="this.value=this.value.replace(/\D/g,'')"
                onafterpaste="this.value=this.value.replace(/\D/g,'')"
                type="number"
                disabled ={this.fieldedit("amount")}
              />
				  </Col>
          <Col span={2}><div className="contractseditTitleStyle">金额(大写):</div></Col>
				  <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.amount_words}
                placeholder="金额(大写)"
                disabled ={true}
              />
				  </Col>
        </Row>)}
        <Row style={{ marginBottom: 5}}>
          <Col span={2}><div className="contractseditTitleStyle">签订日期:</div></Col>
				  <Col span={6}>
            <DatePicker
              style={{ width:  "100%" }}
              locale={locale}
              value={this.props.contractStore.contractModel.sign_date}
              onChange={value =>this.props.contractStore.contractModel.setSign_date(value)}
              disabled ={!(this.props.contractStore.contractModel.employeeid === currentUser.id)}
              placeholder="签订日期"
            />
				  </Col>
         <Col span={2}><div className="contractseditTitleStyle">开始日期:</div></Col>
				  <Col span={6}>
            <DatePicker
              style={{ width:  "100%" }}
              locale={locale}
              value={this.props.contractStore.contractModel.start_date}
              onChange={value =>this.props.contractStore.contractModel.setStart_date(value)}
              placeholder="开始日期"
              disabled ={!(this.props.contractStore.contractModel.employeeid=== currentUser.id  || currentUser.hasPermission("admin"))}
            />
          </Col>
          <Col span={2}><div className="contractseditTitleStyle">终止日期:</div></Col>
				  <Col span={6}>
            <DatePicker
              locale={locale}
              style={{ width:  "100%" }}
              value={this.props.contractStore.contractModel.end_date}
              disabledDate={this.disabledDate}
              onChange={value =>this.props.contractStore.contractModel.setEnd_date(value)}
              placeholder="终止日期"
              disabled ={!(this.props.contractStore.contractModel.employeeid=== currentUser.id || currentUser.hasPermission("admin"))}
            />
				  </Col>
        </Row>
        <Row style={{ marginBottom: 5}}>
        {this.state.kuangjiaxieyivisible && (<>
        <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>资金类别:</div></Col>
        <Col span={6}>
              <Select style={{ width:  "100%" }}
                    showSearch
                    mode="multiple"
                    allowClear
                    disabled ={this.fieldedit("amounttype")}
                    optionFilterProp="children"
                      value={this.props.contractStore.contractModel.amounttype}
                      onChange={value =>this.props.contractStore.contractModel.setAmounttype(value)} >
              {(this.props.amounttypedata || []).map(item => (
                <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
              ))}
              </Select>
				  </Col></>)}
          <Col span={2}><div className="contractseditTitleStyle">是否科研:</div></Col>
            <Col span={6}>
                <Select style={{ width:  "100%" }} value={this.props.contractStore.contractModel.iskeyan} 
                onChange={value => this.props.contractStore.contractModel.setIskeyan(value)} 
                disabled ={this.fieldedit("iskeyan")}>
                {(this.state.iskeyandata || []).map(item => (
                  <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                ))}
                </Select>
            </Col>
            {this.props.contractStore.contractModel.status===2 && (<>
        <Col span={2}><div className="contractseditTitleStyle">备案号:</div></Col>
        <Col span={6}>
              <Input
                style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.recordcode}
                onChange={e => this.props.contractStore.contractModel.setRecordcode(e.target.value)}
                placeholder="null"
                disabled ={!(this.props.contractStore.contractModel.status ===2 && (this.props.contractStore.contractModel.employeeid=== currentUser.id || currentUser.hasPermission("admin")))}
                autoFocus
              />
          </Col></>)}
        </Row>
        <Row style={{ marginBottom: 5}}>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{ color: '#f81d22', fontSize: 12 }}>*</span>是否公开招标:</div></Col>
            <Col span={6}>
                <Select style={{ width:  "100%" }} value={this.props.contractStore.contractModel.iszhaobiao} 
                onChange={value => this.props.contractStore.contractModel.setIszhaobiao(value)} 
                disabled ={this.fieldedit("iszhaobiao")}>
                {(this.state.iszhaobiaodata || []).map(item => (
                  <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                ))}
                </Select>
            </Col>
            <Col span={2}><div className="contractseditTitleStyle">是否集采:</div></Col>
        <Col span={6}>
              <Select style={{ width:  "100%" }} value={this.props.contractStore.contractModel.zhengcai} 
              onChange={value => this.props.contractStore.contractModel.setZhengcai(value)} 
              disabled ={this.fieldedit("zhengcai")}>
              {(this.state.zhengcaidata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
				  </Col>
         <Col span={2}><div className="contractseditTitleStyle">预算编号:</div></Col>
         <Col span={6}>
            <Select style={{ width:  "100%" }}
                      showSearch
                      optionFilterProp="children"
                      value={this.props.contractStore.contractModel.budgetcode}
                      onChange={value => this.props.contractStore.contractModel.setBudgetcode(value)} 
                      disabled ={this.fieldedit("budgetcode")}>
              {(this.props.yusuandata || []).map(item => (
                <Select.Option key={item.code} value={item.code}>{item.name}</Select.Option>
              ))}
              </Select>
          </Col>
        </Row>
        <Row style={{ marginBottom: 5 }}>
            <Col span={2}><div className="contractseditTitleStyle"><span style={{ color: '#f81d22', fontSize: 12 }}>*</span>是否授权委托:</div></Col>
              <Col span={6}>
                <Select style={{ width: "100%" }} value={this.props.contractStore.contractModel.empowersex}
                  onChange={value => this.props.contractStore.contractModel.setEmpowersex(value)}
                  disabled={this.fieldedit("empowersex")}>
                  {(this.state.empowersexdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>
              {this.props.contractStore.contractModel.empowersex==="是" && (<>
              <Col span={2}><div className="contractseditTitleStyle"><span style={{ color: '#f81d22', fontSize: 12 }}>*</span>授权代理人:</div></Col>
              <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.empowerperson}
                onChange={e => this.props.contractStore.contractModel.setEmpowerperson(e.target.value)}
               disabled ={this.fieldedit("empowerperson")}
                placeholder="授权代理人"
              />
              </Col>
              <Col span={2}><div className="contractseditTitleStyle"><span style={{ color: '#f81d22', fontSize: 12 }}>*</span>代理人职务:</div></Col>
              <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.empowerduties}
                onChange={e => this.props.contractStore.contractModel.setEmpowerduties(e.target.value)}
               disabled ={this.fieldedit("empowerduties")}
                placeholder="代理人职务"
              />
              </Col></>)}
            </Row>
      </Panel>
      <Panel header="提醒" key="2">
      <Row style={{ marginBottom: 5}}>
        <Col span={2}><div className="contractseditTitleStyle">审核提醒:</div></Col>
				 <Col span={6}>
             <textarea
               rows="3" cols="50"
               textAlignVertical="top"
               height="100px"
               value={this.props.contractStore.contractModel.warn_check}
                onChange={e =>this.props.contractStore.contractModel.setWarn_check(e.target.value)}
                placeholder="审核提醒"
               disabled ={this.fieldedit("warn_check")}
              />
				  </Col>
          <Col span={2}><div className="contractseditTitleStyle">提醒内容:</div></Col>
          <Col span={6}>
             <textarea
               rows="3" cols="50"
               textAlignVertical="top"
               height="100px"
               value={this.props.contractStore.contractModel.warn_message}
                onChange={e => this.props.contractStore.contractModel.setWarn_message(e.target.value)}
                placeholder="提醒内容"
               disabled ={!(this.props.contractStore.contractModel.employeeid=== currentUser.id || currentUser.hasPermission("admin"))}
              />
				  </Col>
        </Row>
        <Row style={{ marginBottom: 5}}>
        <Col span={2}><div className="contractseditTitleStyle">审批截止日期:</div></Col>
          <Col span={6}>
            <DatePicker
              locale={locale}
              style={{ width:  "100%" }}
              disabled ={this.fieldedit("warn_checkdate")}
              value={this.props.contractStore.contractModel.warn_checkdate}
              onChange={value => this.props.contractStore.contractModel.setWarn_checkdate(value)}
              placeholder="审批截止日期"
            />
          </Col>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>提醒日期:</div></Col>
          <Col span={6}>
            <DatePicker
              locale={locale}
              style={{ width:  "100%" }}
              disabled ={!(this.props.contractStore.contractModel.employeeid=== currentUser.id || currentUser.hasPermission("admin"))}
              value={this.props.contractStore.contractModel.warn_date}
              onChange={value => this.props.contractStore.contractModel.setWarn_date(value)}
              placeholder="提醒日期"
            />
          </Col>
        </Row>
      </Panel>
      <Panel header="其它" key="3">
        <Row style={{ marginBottom: 5}}>
          <Col span={2}><div className="contractseditTitleStyle"><span style={{color:'#f81d22',fontSize:12}}>*</span>重要条款:</div></Col>
          <Col span={6}>
             <textarea
               rows="3" cols="50"
               textAlignVertical="top"
               height="100px"
               value={this.props.contractStore.contractModel.message}
                onChange={e =>this.props.contractStore.contractModel.setMessage(e.target.value)}
                placeholder="重要条款"
               disabled ={this.fieldedit("message")}
              />
				  </Col>
        </Row>
      </Panel>
      </Collapse>
      </div>
    );
  };
}

export default inject('contractStore')(observer(contractTable));